<script setup lang="ts" name="RetreatSetPage">
import router from "@/router";

type HeaderText = {
  bg: string;
  typeBorder: string;
  text: string;
};

type RetreatTotalItem = {
  ships: number;
  allRetreatPiece: number;
  allRetreatTon: number;
  allOutPiece: number;
  allOutTon: number;
  allLeftPiece: number;
  allLeftTon: number;
};

type RetreatSetHistoryItem = {
  id: string;
  transportBillId: string;
  transportShipId: string;
  tShipBillId: string;
  shipNameZh: string;
  cargoType: string;
  cargoTypeName: string;
  voyage: string;
  iE: string;
  billNo: string;
  tallyDate: string;
  timeSpace: string;
  timeSpaceName: string;
  retreatType: string;
  retreatTypeName: string;
  retreatPiece: number;
  retreatTon: number;
  retreatReason: string;
  retreatStorageId: string;
  storageAreaId: string;
  storageAreaName: string;
  storagePositionId: string;
  storagePositionName: string;
  storageSpot: string;
  storagePackageType: string;
  storagePackageTypeName: string;
  storagePiece: number;
  storageTon: number;
  outPiece: number;
  outTon: number;
  leftPiece: number;
  leftTon: number;
  showPopover: boolean;
  isReuse: boolean;
  showDel: boolean;
  showTally: boolean;
};

import { onMounted, reactive, ref, watch } from "vue";
import {
  GetOneStockTallyHistory,
  GetRetreatSetHistory,
  GetRetreatTotal,
  RemoveOneStockTally,
  RemoveRetreatSet
} from "@/api/tally";
import { useEditOstInfo } from "@/store/edit-ost-info";
import { showConfirmDialog, showDialog, showToast } from "vant";
import { useHistorySearchParam } from "@/store/history-search-param";
import SelectStorage from "@/components/SelectInfo/SelectStorage.vue";
import RetreatTallyList from "@/components/Retreat/RetreatTallyList.vue";

const tallyTypeColorMap: Map<string, HeaderText> = new Map();
onMounted(() => {
  tallyTypeColorMap.set("OUT", {
    bg: "bg-gradient-to-r from-sky-50 to-white",
    typeBorder: "border-blue-500",
    text: "text-blue-800"
  });
  tallyTypeColorMap.set("IN", {
    bg: "bg-gradient-to-r from-amber-50 to-white",
    typeBorder: "border-yellow-500",
    text: "text-yellow-800"
  });
  tallyTypeColorMap.set("DIRECT", {
    bg: "bg-gradient-to-r from-green-50 to-white",
    typeBorder: "border-green-500",
    text: "text-green-800"
  });
  // getTallyHistory();
});

let totalData: RetreatTotalItem = reactive({
  ships: 0,
  allLeftPiece: 0,
  allLeftTon: 0,
  allRetreatPiece: 0,
  allRetreatTon: 0,
  allOutPiece: 0,
  allOutTon: 0
});

const dataList = ref([] as Array<RetreatSetHistoryItem>);
const showDelConfirm = ref(false);
const preDelItem = ref({} as RetreatSetHistoryItem);

const pageInfo = reactive({
  current: 1,
  size: 10,
  total: 0,
  loading: false
});

const historySearchParamStore = useHistorySearchParam();

watch(
  () => pageInfo.current,
  (newValue, oldValue) => {
    getRetreatSetHistory(historySearchParamStore.historySearchParam);
    getRetreatTotal(historySearchParamStore.historySearchParam);
  },
  { immediate: true }
);

watch(
  () => historySearchParamStore.historySearchParam,
  (newValue, oldValue) => {
    getRetreatSetHistory(historySearchParamStore.historySearchParam);
    getRetreatTotal(historySearchParamStore.historySearchParam);
  },
  { immediate: true, deep: true }
);

function getRetreatSetHistory(historyParams: any) {
  dataList.value = [];
  const params = {
    personal: "Y",
    ...historyParams,
    current: pageInfo.current,
    size: pageInfo.size
  };
  pageInfo.loading = true;
  GetRetreatSetHistory(params).then(res => {
    if (res) {
      dataList.value = res.data.records;
      dataList.value.forEach(item => {
        item.showPopover = false;
        item.showDel = false;
        item.showTally = false;
      });
      pageInfo.size = res.data.size;
      pageInfo.current = res.data.current;
      pageInfo.total = res.data.total;
    }
    pageInfo.loading = false;
  });
}

function getRetreatTotal(historyParams: any) {
  const params = {
    ...historyParams
  };
  GetRetreatTotal(params).then((res: any) => {
    if (res) {
      totalData = res.data as RetreatTotalItem;
    }
  });
}

const showRetreatTallyPopup = ref(false);
const retreatStorageId = ref("");
const storageInfo = ref("");
function showRetreatTally(item: RetreatSetHistoryItem) {
  retreatStorageId.value = item.retreatStorageId;
  storageInfo.value =
    item.storagePositionName +
    "-" +
    item.storageSpot +
    "-" +
    item.storagePackageTypeName;
  showRetreatTallyPopup.value = true;
}
const isRetreatTallyOpen = (res: any) => {
  showRetreatTallyPopup.value = res;
};

function goToEdit(item: RetreatSetHistoryItem, isReuse: boolean) {
  item.isReuse = isReuse;
  const editOstInfoStore = useEditOstInfo();
  editOstInfoStore.removeEditOstInfo();
  editOstInfoStore.setBillInfo(item);
  item.showPopover = false;
  router.push("/retreat-set");
}

function showRemove(item: RetreatSetHistoryItem) {
  showDelConfirm.value = true;
  preDelItem.value = item;
}

function removeRetreatSet() {
  if (!preDelItem.value || !preDelItem.value.id) {
    return;
  }
  RemoveRetreatSet(preDelItem.value.id).then(() => {
    getRetreatSetHistory(historySearchParamStore.historySearchParam);
    getRetreatTotal(historySearchParamStore.historySearchParam);
    showDelConfirm.value = false;
  });
}
</script>
<template>
  <div class="w-full h-auto flex flex-col bg-transparent mt-[10px]">
    <div class="flex flex-col items-center gap-3 w-full h-full mt-3 mb-5">
      <div class="w-[95%] h-[auto] bg-blue-600 text-white flex-col p-[10px]">
        <div class="flex w-full flex-1">
          <div class="flex flex-1">总船数：{{ totalData.ships }}</div>
          <div class="flex flex-1">总退关: {{ totalData.allRetreatPiece }}/{{ totalData.allRetreatTon }}</div>
        </div>
        <div class="flex w-full flex-1 mt-[10px]">
          <div class="flex flex-1">总提货：{{ totalData.allOutPiece }}/{{ totalData.allOutTon }}</div>
          <div class="flex flex-1">总结吨：{{ totalData.allLeftPiece }}/{{ totalData.allLeftTon }}</div>
        </div>
      </div>

      <van-empty
        description="没有数据"
        v-if="dataList.length === 0 && !pageInfo.loading"
      />
      <van-loading color="#1989fa" v-if="pageInfo.loading" />
      <div
        v-for="item in dataList"
        :key="item.id"
        class="flex flex-col w-[95%] mx-auto h-auto bg-white mt-[10px]"
      >
        <div
          class="flex w-full h-[50px] justify-between items-center px-[15px] bg-gradient-to-r from-sky-50 to-white"
        >
          <div class="flex">
            <div class="flex font-bold text-[14px] items-center">
              {{ item.shipNameZh }}-{{ item.voyage }}
            </div>
            <div
              class="ml-[10px] flex h-[20px] w-auto border-[1px] px-[5px] py-[3px] text-[10px] items-center border-blue-500"
            >
              <span class="text-blue-800">{{ item.retreatTypeName }}</span>
            </div>
          </div>
          <div class="flex">
            <van-popover v-model:show="item.showPopover" placement="left">
              <div
                class="flex flex-col w-[80px] h-[90px] text-[14px] justify-center"
              >
                <div
                  class="flex flex-1 w-full items-center justify-center"
                  @click="goToEdit(item, false)"
                >
                  编辑
                </div>
                <div
                  class="flex flex-1 w-full border-t-2 border-b-2 items-center justify-center"
                  @click="goToEdit(item, true)"
                >
                  复用
                </div>
                <div
                  class="flex flex-1 w-full text-red-600 items-center justify-center"
                  @click="showRemove(item)"
                >
                  删除
                </div>
              </div>
              <template #reference>
                <van-icon class="text-blue-800" name="setting-o" size="20" />
              </template>
            </van-popover>
          </div>
        </div>
        <div class="flex w-full h-auto p-[15px] flex-col gap-2 text-[14px]">
          <div class="flex h-auto w-full">
            <div class="w-full h-auto flex items-center">
              <div class="flex text-gray-400">日期班次：</div>
              <div>{{ item.tallyDate }}/ {{ item.timeSpaceName }}</div>
            </div>
          </div>
          <div class="flex h-auto w-full">
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">单号：</div>
              <div>{{ item.billNo }}</div>
            </div>
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">货名：</div>
              <div>{{ item.cargoTypeName }}</div>
            </div>
          </div>
          <!--          <div class="flex h-auto w-full">-->
          <!--            <div class="w-full h-auto flex items-center">-->
          <!--              <div class="flex text-gray-400">退关件吨：</div>-->
          <!--              <div>{{ item.retreatPiece }} / {{ item.retreatTon }}</div>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div class="flex h-auto w-full">-->
          <!--            <div class="w-full h-auto flex items-center">-->
          <!--              <div class="flex text-gray-400">提货件吨：</div>-->
          <!--              <div>{{ item.outPiece }} / {{ item.outTon }}</div>-->
          <!--            </div>-->
          <!--          </div>-->

          <div class="flex h-auto w-full">
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">退关件吨：</div>
              <div>{{ item.retreatPiece }} / {{ item.retreatTon }}</div>
            </div>
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">提货件吨：</div>
              <div>{{ item.outPiece }} / {{ item.outTon }}</div>
            </div>
          </div>

          <div class="flex h-auto w-full">
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">结存件吨：</div>
              <div>{{ item.leftPiece }} / {{ item.leftTon }}</div>
            </div>
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-blue-600" @click="showRetreatTally(item)">
                查看提货详情
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model:show="showDelConfirm" round>
        <div class="h-[150px] w-[300px]">
          <div class="flex flex-col w-full h-full">
            <div
              class="w-full flex flex-1 justify-center items-center text-[18px]"
            >
              确定删除吗？
            </div>
            <div class="w-full flex h-[50px]">
              <div class="flex flex-1 px-[10px]">
                <van-button
                  class="w-full h-full"
                  type="default"
                  @click="
                    showDelConfirm = false;
                    preDelItem = {} as RetreatSetHistoryItem;
                  "
                  >取消</van-button
                >
              </div>
              <div class="flex flex-1 px-[10px]">
                <van-button
                  class="w-full h-full"
                  type="danger"
                  @click="removeRetreatSet"
                  >确定</van-button
                >
              </div>
            </div>
          </div>
        </div>
      </van-popup>
      <van-popup
        v-model:show="showRetreatTallyPopup"
        position="bottom"
        round
        duration="0"
        class="bg-slate-400 h-[calc(100vh-100px)]"
      >
        <RetreatTallyList
          :storageInfo="storageInfo"
          :retreatStorageId="retreatStorageId"
          @isOpen="isRetreatTallyOpen"
        ></RetreatTallyList>
      </van-popup>
      <div class="w-full h-auto px-[20px]">
        <van-pagination
          v-model="pageInfo.current"
          :total-items="pageInfo.total"
          :items-per-page="pageInfo.size"
        >
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
        </van-pagination>
      </div>
    </div>
  </div>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
